<template>
  <div>
    <div class="conditionRow">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="订单号" prop="hkorderNo">
         <el-input
           v-model="queryParams.hkorderNo"
           placeholder="请输入订单号"
           clearable
           @keyup.enter.native="handleQuery"
           @change="handleQuery"
         />
       </el-form-item>
       <el-form-item label="联系方式" prop="phone">
         <el-input
           v-model="queryParams.phone"
           placeholder="请输入联系方式"
           clearable
           @keyup.enter.native="handleQuery"
           @change="handleQuery"
         />
       </el-form-item>
       <el-form-item label="订单状态" prop="status">
         <el-select v-model="queryParams.status" placeholder="请选择订单状态" clearable @change="handleQuery">
           <el-option
             v-for="dict in statuslist"
             :key="dict.value"
             :label="dict.label"
             :value="dict.value"
           />
         </el-select>
       </el-form-item>
       <el-form-item label="下单时间">
         <el-date-picker
           v-model="dateRange"
           style="width: 240px"
           value-format="yyyy-MM-dd"
           type="daterange"
           range-separator="-"
           start-placeholder="开始日期"
           end-placeholder="结束日期"
           @change="timeChange"
         ></el-date-picker>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
         <el-button icon="el-icon-download" type="primary" size="mini" @click="handleExport" v-hasPermi="['recycle:integralOrder:export']">下载</el-button>
       </el-form-item>
     </el-form>
    </div>
    <el-table
      v-loading="loading"
      :data="list"
      style="width: 100%;"
    >
      <el-table-column label="订单号" align="center" prop="hkorderNo" :show-overflow-tooltip="true" />
      <el-table-column label="联系方式" align="center" prop="phone" :show-overflow-tooltip="true" />
      <el-table-column label="下单时间" align="center" prop="createdTime" :show-overflow-tooltip="true" />
      <el-table-column label="取件地址" align="center" prop="address" :show-overflow-tooltip="true" />
      <el-table-column label="订单状态" align="center" prop="status" :show-overflow-tooltip="true" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handleForceLogout(scope.row)"
            v-hasPermi="['monitor:online:forceLogout']"
          >详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.currentPage"
      :limit.sync="queryParams.pageSize"
      layout="total, prev, pager, next,sizes,jumper"
      @pagination="getList"
    />
    <!-- 添加或修改回收订单对话框 -->
    <el-dialog title="订单详情" :visible.sync="openDetail" width="550px" append-to-body>
        <div class="contbox" v-if="detailInfo.data">
            <div class="boxrow"><span class="name">订单编号：</span><p class="tex">{{detailInfo.data.hkorderNo}}</p></div>
            <div class="boxrow"><span class="name">联系方式：</span><p class="tex">{{detailInfo.data.createdBy}} {{detailInfo.data.phone}}</p></div>
            <div class="boxrow"><span class="name">下单时间：</span><p class="tex">{{detailInfo.data.createdTime}}</p></div>
            <div class="boxrow"><span class="name">地址：</span><p class="tex">{{detailInfo.data.address}}</p></div>
            <div class="boxrow" v-for="(item,index) in detailInfo.detail" :key="index">
              <div class="lump"><span class="name">家政服务：</span><p class="tex">{{item.name}}</p></div>
              <div class="lump"><span class="name">价格：</span><p class="tex">{{item.money}}</p></div>
            </div>
            <div class="boxrow"><span class="name">预估价格：</span><p class="tex">{{detailInfo.data.forecastMoney}}</p></div>
            <div class="boxrow"><span class="name">实际价格：</span><p class="tex">{{detailInfo.data.practicalMoney}}</p></div>
            <div class="boxrow"><span class="name">订单状态：</span><p class="tex">{{detailInfo.data.status}}</p></div>
            <div class="boxrow"><span class="name">备注说明：</span><p class="tex">{{detailInfo.data.remark}}</p></div>
        </div>
    </el-dialog>
  </div>
</template>

<script>
  import { housekeepingOrderPageQuery, getHousekeepingOrder } from "@/api/recycle/housekeepingOrder";
  export default {
      data(){
        return{
          // 显示搜索条件
          showSearch: true,
          // 查询参数
          queryParams: {
            currentPage: 1,
            pageSize: 10,
            hkorderNo: null,
            phone: null,
            status: null,
            searchTimeBegin: null,
            searchTimeEnd: null
          },
          // 日期范围
          dateRange: [],
          // 遮罩层
          loading: true,
          // 总条数
          total: 0,
          // 表格数据
          list: [],
          currentPage: 1,
          pageSize: 10,
          openDetail:false,
          statuslist:[
            {label:"全部",value:null},
            {label:"待接单",value:"待接单"},
            {label:"待上门",value:"待上门"},
            {label:"待完成",value:"待完成"},
            {label:"已完成",value:"已完成"},
            {label:"已结算",value:"已结算"}
          ],
          detailInfo:{}
        }
      },
      created() {
        this.getList();
      },
      methods:{
        //下载
        handleExport() {
          this.download('/ruoyi-recycle/housekeeping/export', {
            ...this.queryParams
          }, `housekeeping_${new Date().getTime()}.xlsx`)
        },
        timeChange(time){
          if(time){
            this.queryParams.searchTimeBegin=time[0]
            this.queryParams.searchTimeEnd=time[1]
          }else{
            this.queryParams.searchTimeBegin=null
            this.queryParams.searchTimeEnd=null
          }
          this.handleQuery()
        },
        /** 查询列表 */
        getList() {
          this.loading = true;
          for(let i in this.queryParams){
            if(!this.queryParams[i]) this.queryParams[i]=null
          }
          housekeepingOrderPageQuery(this.queryParams).then(response => {
            this.list = response.records;
            this.total = response.total;
            this.loading = false;
          });
        },
        /** 搜索按钮操作 */
        handleQuery() {
          this.queryParams.currentPage = 1;
          this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
          this.resetForm("queryForm");
          this.queryParams.searchTimeBegin=''
          this.queryParams.searchTimeEnd=''
          this.dateRange=[]
          console.log(this.queryParams)
          this.handleQuery();
        },
        handleForceLogout(data){
          getHousekeepingOrder(data.hkorderNo).then(response=>{
             this.detailInfo=response
             this.openDetail=true
          })
        }
      }
  }
</script>

<style lang="scss" scoped>
  .contbox{
    margin: 0 40px;
    .boxrow{
      display: flex;
      font-size: 14px;
      margin-bottom: 18px;
      color: #333;
      .name{
        font-weight: bold;
      }
      .tex{
        max-width: 350px;
      }
      .lump{
        display: flex;
        margin-right: 30px;
      }
      .img{
          max-width: 350px;
      }
    }
  }
</style>
